<template>
  <div class="prop-wrapper">
    <!-- <el-row>
      <el-col :span="20">
        <span style="font-size:18px; font-weight:bold;">商品属性</span>
        <span style="font-size:12px; color:red;"
          ><el-cascader
            size="small"
            v-model="kind"
            :options="kindList"
            :props="casProps"
            expand-trigger="hover"
            clearable
          ></el-cascader
        ></span>
      </el-col>
      <el-col style="text-align:right;" :span="4">
        <el-button
          style="margin-left:5px;"
          @click="
            addVisible = true;
            currentId = null;
          "
          size="small"
          type="primary"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :data="propList"
      style="width: 100%;margin-top:5px;"
      :height="tableHeight"
      border
      stripe
    >
      <el-table-column prop="spec_kind_name" label="属性名称"></el-table-column>
      <el-table-column prop="kind_name" label="商品分类"></el-table-column>
      <el-table-column prop="lower" label="可选值">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.lower">{{ item }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <div style="text-align:center;">
            <el-button
              @click="
                addVisible = true;
                currentId = scope.row.id;
              "
              type="primary"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="deleteProp(scope.row.id)"
              type="danger"
              size="small"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <add-prop
      :visible="addVisible"
      :kindList="kindList"
      @close="
        addVisible = false;
        getPropList();
      "
      :id="currentId"
    ></add-prop>-->
    <div class="prop-content">
      <div class="top">
        <div class="title-wrapper">
          <div class="title">规格管理</div>
        </div>
        <el-button type="primary" @click.native="add">添加</el-button>
      </div>
      <div class="content">
        <el-table :data="list" style="width: 100%" :height="height">
          <el-table-column prop="spec_kind_name" label="名称" width />
          <el-table-column prop="first_cate_name" label="所含分类" width>
            <template slot-scope="scope">
              <div>{{ scope.row.first_cate_name.join(',') }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="lower" label="可选值">
            <template slot-scope="scope">
              <div>{{ scope.row.lower.join(',') }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <span class="edit" @click="edit(scope.row.id)">编辑</span>
                <span class="del" @click="deleteProp(scope.row.id)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <edit-prop :id="id" ref="editProp" @submitComplete="handleSubmitComplete" />
    </div>
    <div class="pagination-wrapper">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
/* import addProp from './component/add-prop'
import { getPropClassList, getPropList, deleteProp } from '@/api/good-mng' */
import { deleteProp } from '@/api/good-mng'
import EditProp from './component/edit-prop'
import { getPropList } from '@/api/prop'
const ERR_OK = 200
export default {
  name: 'PropMng',
  components: {
    /*  addProp */
    EditProp
  },
  data() {
    return {
      /* tableHeight: 0,
      propList: [],
      casProps: {
        expandTrigger: 'hover',
        checkStrictly: true,
        value: 'id',
        label: 'kind_name',
        children: 'lower'
      },
      kindList: [],
      kind: [],
      addVisible: false,
      currentId: null */
      list: [],
      pageSize: 15,
      total: 0,
      currentPage: 1,
      id: '',
      height: 0
    }
  },
  watch: {
    /* kind: function(val) {
      this.getPropList()
    } */
  },
  created() {
    /* this.changeSize()
    getPropClassList().then(res => {
      if (res.code === 200) {
        this.kindList = res.data
      }
    })
    this.getPropList() */
    this._getPropList()
    this.setHeight()
  },
  methods: {
    deleteProp(id) {
      console.log(id)
      this.$confirm('确认删除该属性分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProp({ id }).then(res => {
          if (res.code === 200) {
            // this.deleteItem(id)
            this._getPropList(this.page)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      })
    },
    deleteItem(id) {
      const fIndex = this.list.findIndex((item, index) => {
        return item.id === id
      })
      if (fIndex >= 0) {
        this.list.splice(fIndex, 1)
      }
    },
    /*
    changeSize() {
      this.tableHeight = document.body.clientHeight - 150
      window.onresize = () => {
        this.changeSize()
      }
    },
    getPropList() {
      getPropList({ kind: this.kind[1] ? this.kind[1] : null }).then(res => {
        if (res.code === 200) {
          this.propList = res.data.data
        }
      })
    } */
    add() {
      this.$refs.editProp.show()
      this.$refs.editProp.clear()
    },
    edit(id) {
      this.$refs.editProp.show()
      this.id = id
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this._getPropList(this.currentPage)
    },
    handleSubmitComplete() {
      this._getPropList()
    },
    setHeight() {
      this.height = document.body.clientHeight - 190
      window.onresize = () => {
        this.height = document.body.clientHeight - 190
      }
    },
    _getPropList(page) {
      getPropList(page)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.data
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
.prop-wrapper {
  padding: 0 20px;
  box-sizing: border-box;

  .prop-content {
    .top {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .title-wrapper {
        display: flex;
        align-content: center;
        .title {
          height: 44px;
          line-height: 44px;
          color: rgba(68, 68, 68, 1);
          font-size: 18px;
          font-family: Roboto;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    .content {
      .el-table /deep/ .cell {
        .edit,
        .add {
          color: #409eff;
          margin-right: 24px;
          cursor: pointer;
          white-space: nowrap;
        }
        .del {
          color: #f56c6c;
          cursor: pointer;
          white-space: nowrap;
        }
      }
    }
  }

  .pagination-wrapper {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
